<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>


<body>
    <div id="app">
       
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({

        data() {
            return {
                post: {
                    title: 'hello',
                    likes: '123',
                    a: 'A',
                    b: 'B',
                    c: 'C',
                },
                count: 1
            }
        },
        template: `
    <test v-bind="post" :count="count"/>
    `
    })
    app.component('test', {
        data() {
            return {
                myCount: this.count
            }
        },
        props: ['title', 'likeVal', 'a', 'b', 'c', 'count'],
        template: `
    <div @click="handelAdd">{{title}} ---- {{myCount}}---{{a}}</div>`
        ,
        methods: {
            handelAdd() {
                console.log(this.count + '--' + this.myCount);
                this.myCount++;
            }
        },
    });
    const vm = app.mount('#app');

</script>

</html>